<template>
  <transition name="el-fade-in-linear">
    <div class="suspension" v-show="show" @mouseleave="mouseleave">
      <slot></slot>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      showHeight: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
      handleScroll() {
        this.show = this.showHeight && window.scrollY >= this.showHeight
      },
      mouseleave() {
        this.$emit('mouseleave')
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        window.addEventListener('scroll', this.handleScroll)
      })
    }
  }
</script>

<style lang="scss" rel="stylesheet/sass">
  .suspension {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
  }
</style>
